---
title: Imports
description: Apprendre comment importer différents types de contenu avec Astro.
i18nReady: true
---
import RecipeLinks from "~/components/RecipeLinks.astro";
import ReadMore from '~/components/ReadMore.astro'

Astro supporte la plupart des ressources statiques sans aucune configuration requise. Vous pouvez utiliser la directive `import` n'importe où dans votre projet JavaScript (y compris votre *frontmatter* d'Astro) et Astro inclura une copie construite et optimisée de cette ressource statique dans votre build final. `@import` est également prise en charge dans les balises CSS et `<style>`.

## Types de fichiers supportés

Les types de fichiers suivants sont pris en charge par Astro :

- Composants Astro (`.astro`)
- Markdown (`.md`, `.markdown`, etc.)
- JavaScript (`.js`, `.mjs`)
- TypeScript (`.ts`, `.tsx`)
- Paquets NPM
- JSON (`.json`)
- JSX (`.jsx`, `.tsx`)
- CSS (`.css`)
- Modules CSS (`.module.css`)
- Images et actifs (`.svg`, `.jpg`, `.png`, etc.)

De plus, vous pouvez étendre Astro pour ajouter le support de différents [Frameworks UI](/fr/guides/framework-components/) comme React, Svelte et Vue. Vous pouvez également installer l'[intégration Astro MDX](/fr/guides/integrations-guide/mdx/) et utiliser les fichiers `.mdx` dans votre projet.

### Les fichiers dans `public/`

Vous pouvez placer n'importe quelle ressource statique dans le répertoire [`public/`](/fr/basics/project-structure/#public) de votre projet, et Astro le copiera directement dans votre version finale sans y toucher. Les fichiers dans le répertoire `public/` ne sont pas construits ou regroupés par Astro, ce qui signifie que n'importe quel type de fichier est supporté. Vous pouvez référencer un fichier `public/` par un chemin d'URL directement dans vos modèles HTML.

## Déclarations d'importation

Astro utilise ESM, la même syntaxe [`import`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/import) et [`export`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/export) que celle utilisée dans le navigateur.

## JavaScript

```js
import { getUser } from './user.js';
```

JavaScript peut être importé en utilisant la syntaxe normale d'importation et d'exportation d'ESM.

## TypeScript

```js
import { getUser } from './user.ts';
import type { UserType } from './user.ts';
```

Astro comprend un support intégré pour [TypeScript] (https://www.typescriptlang.org/). Vous pouvez importer des fichiers `.ts` et `.tsx` directement dans votre projet Astro, et même écrire du code TypeScript directement dans votre [script de composant Astro](/fr/basics/astro-components/#le-script-du-composant) et n'importe quelle [balise de scripts](/fr/guides/client-side-scripts/).

**Astro n'effectue aucune vérification de type lui-même.** La vérification de type doit être prise en charge en dehors d'Astro, soit par votre IDE, soit par un script séparé. Pour vérifier le type des fichiers Astro, la commande [`astro check`](/fr/reference/cli-reference/#astro-check) est fournie.

:::note[TypeScript et les extensions de fichiers]
Selon les [règles de résolution des modules TypeScript](https://www.typescriptlang.org/docs/handbook/module-resolution.html), les extensions de fichiers `.ts` et `.tsx` ne doivent pas être utilisées lors de l'importation de fichiers TypeScript. À la place, utilisez les extensions de fichiers `.js`/`.jsx` ou omettez complètement l'extension de fichier.

```ts
import { getUser } from './user.js'; // user.ts
import MyComponent from "./MyComponent"; // MyComponent.tsx
```

:::

<ReadMore>Lire la suite [Prise en charge de TypeScript dans Astro](/fr/guides/typescript/).</ReadMore>


## JSX / TSX

```js
import { MyComponent } from './MyComponent.jsx';
```

Astro inclut un support intégré pour les fichiers JSX (`*.jsx` et `*.tsx`) dans votre projet. La syntaxe JSX est automatiquement transposée en JavaScript.

Bien qu'Astro comprenne la syntaxe JSX dans sa version standard, vous devrez inclure une intégration de framework pour rendre correctement des frameworks tels que React, Preact et Solid. Consultez notre guide [Utilisation des intégrations](/fr/guides/integrations-guide/) pour en savoir plus.

:::note
**Astro ne supporte pas JSX dans les fichiers `.js`/`.ts`.** JSX ne sera géré qu'à l'intérieur des fichiers qui se terminent par les extensions `.jsx` et `.tsx`.
:::

## Paquets NPM

Si vous avez installé un paquet NPM, vous pouvez l'importer dans Astro.

```astro
---
import { Icon } from 'astro-icon';
---
```
Si un paquet a été publié en utilisant un ancien format, Astro essaiera de convertir le paquet en ESM pour que les déclarations `import` fonctionnent. Dans certains cas, vous devrez ajuster votre [config `vite`](/fr/reference/configuration-reference/#vite) pour que cela fonctionne.

:::caution
Certains paquets s'appuient sur un environnement de navigation. Les composants Astro fonctionnant sur le serveur, l'importation de ces paquets dans la partie frontale peut [conduire à des erreurs](/fr/guides/troubleshooting/).
:::

## JSON

```js
// Charge l'objet JSON via l'export par défaut
import json from './data.json';
```

Astro prend en charge l'importation de fichiers JSON directement dans votre application. Les fichiers importés retournent l'objet JSON complet dans l'importation par défaut.

## CSS

```js
// Charge et intègre 'style.css' sur la page
import './style.css';
```

Astro prend en charge l'importation de fichiers CSS directement dans votre application. Les styles importés ne nécessitent pas d'exportations, mais l'importation d'un style ajoutera automatiquement ce style à la page. Cela fonctionne pour tous les fichiers CSS par défaut, et peut prendre en charge les langages CSS compilés comme Sass et Less via des plugins.

## Modules CSS

```jsx
// 1. Convertit les noms de classes './style.module.css' en valeurs uniques, portées.
// 2. Retourne un objet qui associe les noms de classes d'origine à leur valeur portée finale.
import styles from './style.module.css';

// Cet exemple utilise JSX, mais vous pouvez utiliser les modules CSS avec n'importe quel Framework.
return <div className={styles.error}>Votre message d'erreur</div>;
```

Astro supporte les modules CSS en utilisant la convention de dénomination `[nom].module.css`. Comme tout fichier CSS, l'importation d'un module CSS l'appliquera automatiquement à la page. Cependant, les modules CSS exportent un objet spécial par défaut `styles` qui fait correspondre vos noms de classe originaux à des identifiants uniques.

Les modules CSS vous aident à renforcer le cadrage et l'isolation des composants sur le frontend grâce à des noms de classe générés de manière unique pour vos feuilles de style.

## Autres ressources

```jsx
import imgReference from './image.png'; // imgReference === '/src/image.png'
import svgReference from './image.svg'; // svgReference === '/src/image.svg'
import txtReference from './words.txt'; // txtReference === '/src/words.txt'

// Cet exemple utilise JSX, mais vous pouvez utiliser des références d'importation avec n'importe quel Framework.
<img src={imgReference.src} alt="image description" />;
```

Toutes les autres ressources qui ne sont pas explicitement mentionnés ci-dessus peuvent être importés via l'`import` ESM et renverront une référence URL à la ressource finale construite. Cela peut être utile pour référencer des ressources non-JS par URL, comme créer un élément image avec un attribut `src` pointant vers cette image.

Il peut également être utile de placer des images dans le dossier `public/` comme expliqué sur la [page de structure du projet](/fr/basics/project-structure/#public).

:::note
L'ajout d'un texte **alt** aux balises `<img>` est encouragé pour des raisons d'accessibilité ! N'oubliez pas d'ajouter un attribut `alt="a helpful description"` à vos éléments d'image. Vous pouvez laisser l'attribut vide si l'image est purement décorative.
:::

## `Astro.glob()`

[`Astro.glob()`](/fr/reference/api-reference/#astroglob) est un moyen d'importer plusieurs fichiers à la fois.

`Astro.glob()` ne prend qu'un seul paramètre : un [pattern global](/fr/guides/imports/) relatif correspondant aux fichiers locaux que vous souhaitez importer. Il est asynchrone et renvoie un tableau des exportations de chaque fichier correspondant.

```astro title="src/components/my-component.astro"
---
// importe tous les fichiers qui se terminent par `.md` dans `./src/pages/post/`
const posts = await Astro.glob('../pages/post/*.md'); 
---
<!-- Rend un <article> pour les 5 premiers articles du blog -->
<div>
{posts.slice(0, 4).map((post) => (
  <article>
    <h2>{post.frontmatter.title}</h2>
    <p>{post.frontmatter.description}</p>
    <a href={post.url}>Lire plus</a>
  </article>
))}
</div>
```

Les composants Astro importés avec `Astro.glob` sont de type [`AstroInstance`](/fr/reference/api-reference/#astro-files). Vous pouvez effectuer le rendu de chaque instance de composant en utilisant sa propriété `default` :

```astro title="src/pages/component-library.astro" {8}
---
// importe tous les fichiers qui se terminent par `.astro` dans `./src/components/`
const components = await Astro.glob('../components/*.astro');
---
<!-- Affiche tous nos composants -->
{components.map((component) => (
  <div>
    <component.default size={24} />
  </div>
))}
```


### Patterns globaux

Un pattern global est un chemin d'accès à un fichier qui prend en charge les caractères génériques spéciaux. Il est utilisé pour référencer plusieurs fichiers dans votre projet en même temps.

Par exemple, le pattern global `./pages/**/*.{md,mdx}` commence dans le sous-répertoire pages, et regarde dans tous ses sous-répertoires (`/**`), et correspond à tous les noms de fichier (`/*`) qui finissent soit par `.md` ou `.mdx` (`.{md,mdx}`).

#### Patterns globaux dans Astro

Pour être utilisé avec `Astro.glob()`, le pattern global doit être une chaîne littérale et ne peut pas contenir de variables. Voir [le guide de dépannage](/fr/guides/troubleshooting/#astroglob---no-matches-found) pour une solution de contournement.

En outre, les motifs globaux doivent commencer par l'un des éléments suivants :
- `./` (pour commencer dans le répertoire actuel)
- `../` (pour démarrer dans le répertoire parent)
- `/` (pour démarrer à la racine du projet)
 

[En savoir plus sur la syntaxe des motifs globaux](https://github.com/mrmlnc/fast-glob#pattern-syntax).

#### `Astro.glob()` vs `getCollection()`

[Les collections de contenu](/fr/guides/content-collections/) fournissent une [API `getCollection()`](/fr/reference/api-reference/#getcollection) pour charger plusieurs fichiers au lieu de `Astro.glob()`. Si vos fichiers de contenu (par exemple Markdown, MDX, Markdoc) sont situés dans des collections dans le répertoire `src/content/`, utilisez `getCollection()` pour [interroger une collection](/fr/guides/content-collections/#interroger-les-collections) et retourner les entrées de la collection.

## WASM

```js
// Charge et initialise le fichier WASM demandé
const wasm = await WebAssembly.instantiateStreaming(fetch('/example.wasm'));
```

Astro permet de charger des fichiers WASM directement dans votre application en utilisant l'API [`WebAssembly`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) du navigateur.


## Node Builtins

Nous encourageons les utilisateurs d'Astro à éviter les "Built-in" Node.js (`fs`, `path`, etc.) dans la mesure du possible. Astro est compatible avec de nombreux moteurs d'exécution utilisant des [adaptateurs](/fr/guides/server-side-rendering/). Cela inclut [Deno](https://github.com/denoland/deno-astro-adapter) et [Cloudflare Workers](/fr/guides/integrations-guide/cloudflare/) qui ne supportent pas les modules intégrés de Node tels que `fs`.

Notre objectif est de fournir des alternatives Astro aux composants Node.js les plus courants. Cependant, aucune alternative de ce type n'existe aujourd'hui. Donc, si vous avez _vraiment_ besoin d'utiliser ces modules Built-in, nous ne voulons pas vous en empêcher. Astro supporte les modules Built-in de Node.js en utilisant le préfixe `node:` de Node. Si vous voulez lire un fichier, par exemple, vous pouvez le faire comme ceci :

```astro title="src/components/MyComponent.astro"
---
// Exemple : importation de l'intégration "fs/promises" de Node.js
import fs from 'node:fs/promises';

const url = new URL('../../package.json', import.meta.url);
const json = await fs.readFile(url, 'utf-8');
const data = JSON.parse(json);
---

<span>Version : {data.version}</span>
```

## Extension de la prise en charge des types de fichiers

Avec **Vite** et les plugins **Rollup** compatibles, vous pouvez importer des types de fichiers qui ne sont pas pris en charge nativement par Astro. Pour savoir où trouver les plugins dont vous avez besoin, consultez la section [Finding Plugins](https://vitejs.dev/guide/using-plugins.html#finding-plugins) de la documentation Vite.

:::note[Configuration du plugin]
Référez-vous à la documentation de votre plugin pour connaître les options de configuration et savoir comment l'installer correctement.
:::

<RecipeLinks slugs={["fr/recipes/add-yaml-support"]} />
